@import url(./site.vars.less);
*{
  margin: 0;
  padding: 0;
}
.clearfix {
  &:after {
    content: "";
    visibility: hidden;
    display: block;
    clear: both;
    height: 0;
  }
}
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  &:active, &:link, &:visited {
    text-decoration: none;
    color: #fff;
  }
}
// h1, h2, h3, h4, h5, h6 {
//   font-weight: normal;
// }
a, input, select, button, span, label, div, textarea {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -moz-tap-highlight-color: rgba(0,0,0,0);
  -mz-tap-highlight-color: rgba(0,0,0,0);
  -o-tap-highlight-color: rgba(0,0,0,0);
}
input, select, button, span, label {
  outline: none; border:none;
}
textarea {
  resize: none;
  width: 195px;
  padding: 5px;
  padding-left: 8px;
  box-sizing: border-box;
}
// em, i {
//   font-style: normal;
// }
// b {
//   font-weight: normal;
// }
html, body {
  height: 100%;
}
input {
  padding: 7px;
  padding-left: 8px;
  box-sizing: border-box;
  // default width
  width: 195px;
  border: 0.5px solid rgb(209, 209, 209);
  &:focus {
    transition: all 0.1s linear;
    border-color: rgb(78, 138, 207);
    box-shadow: 0 0 0.5px rgb(78, 138, 207);
  }
}


// 按钮
.btn {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  width: 80px;
  height: 35px;
  text-align: center;
  &.square {
    height: 30px;
    border: 1px solid #c3c3c3;
    padding: 5px 10px;
    font-size: 12px;
    background: #fff;
    &:hover {
      background: #f3f3f3;
    }
  }
  &.default {
    border: 0.5px solid rgb(78, 138, 207);
    // border-radius: 5px;
    color: rgb(78, 138, 207);
    padding: 7px 10px;
    font-size: 14px;
    background: #fff;
    transition: all .3s ease;
    &:hover {
      border: 4px solid rgb(78, 138, 207);
    }
  }
  &.primary {
    // border-radius: 5px;
    color: #fff;
    background: rgb(78, 138, 207);
    padding: 7px 10px;
    font-size: 14px;
    transition: all .3s ease;
    &.disable {
      background: #afafaf;
      cursor: not-allowed;
      &:hover {
        opacity: 1;
      }
      &:active {
        background: #afafaf;
        opacity: 1;
      }
    }
    &:hover {
      opacity: 0.8;
    }
    &:active {
      background: rgb(21, 105, 201);
      opacity: 1;
    }
  }
  &.plain {
    background: #ffffff;
    // border-radius: 5px;
    color: rgb(38, 139, 255);
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease;
    &.disable {
      background: #afafaf;
      cursor: not-allowed;
      &:hover {
        background: #afafaf;
        border-color: #cccccc;
        color: #9E9E9E;
      }
    }
    &.chosen {
      background: #fff;
      border-color: @site-main;
      color: @site-main;
    }
    &:hover {
      color: @site-main;
      background: #C6DCF5;
    }
    &:active {
      background: rgb(120, 183, 255);
    }
  }
}

// form
form {
  padding: 40px 10px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
  &.horizontal {
    padding: 0 30px;
    display: block;
    text-align: left;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    .row {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .form-item {
        width: 100%;
        display: inline-block;
        margin: 20px 0;
        label {
          display: block;
          position: relative;
          font-size: 16px;
          margin-right: 15px;
          margin-top: 5px;
          margin-bottom: 7px;
          &.require:before {
            color: red;
            content: '*';
            font-size: 7px;
            position: absolute;
            top: 3px;
            left: -7px;
            font-weight: lighter;
          }
        }
        input {
          width: 90%;
          height: 35px;
          font-size: 16px;
        }
      }
    }
    
  }
  .form-item {
    box-sizing: border-box;
    margin: 20px 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-style: none;
    label {
      position: relative;
      font-size: 14px;
      display: inline-block;
      margin-right: 15px;
      margin-top: 5px;
      text-align: left;
      &.require:before {
        color: red;
        content: '*';
        font-size: 7px;
        position: absolute;
        top: 3px;
        left: -7px;
        font-weight: lighter;
      }
    }
  }
}
// table
.table-header {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  background: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  &>p {
    font-size: 12px;
    text-align: left;
    flex: 1;
    color: rgb(0, 61, 131);
  }
  &>.search-bar {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    &>input {
      box-sizing: border-box;
      margin-right: 5px;
      height: 35px;
    }
  }
}
.table {
  border-spacing: 0;
  width: 100%;
  margin: 0 auto;
  // border: 0.5px solid #E4E4E4;
  border-collapse: collapse;
  &.fixed-top {
    position: sticky;
    top: 0;
    z-index: 999;
    &.shadow {
      box-shadow: 0 0 10px rgba(0,0,0,.22);
    }
  }
  thead {
    color: rgb(99, 99, 99);
    font-size: 14px;
    th {
      // border: 0.5px solid #E4E4E4;
      box-sizing: border-box;
      text-align: center;
      height: 50px;
      background: #F9FAFC;
      user-select: none;
    }
  }
  tbody {
    tr{
      height: 60px;
      td {
        text-align: center;
        border: 0.5px solid #E4E4E4;
        border-left: 0;
        border-right: 0;
        font-size: 13px;
        background: #fff;
        &.expend {
          cursor: pointer;
          width: 40px;
          &>img {
            display: inline-block;
            user-select: none;
            transform: rotate(-90deg);
            padding: 10px;
            transition: all .1s linear;
            &.rotate {
              transform: rotate(90deg);
            }
          }
        }
        &.hoverable {
          transition: background .1s linear;
          cursor: pointer;
          user-select: none;
          &:hover {
            background: rgba(210, 231, 255, 0.6);
          }
        }
        &.chosen {
          background: rgba(210, 231, 255, 0.6) !important;
        }
        &.warn {
          color: rgb(255, 72, 72);
        }
        &.success {
          color: rgb(0, 219, 0);
        }
        &>a {
          color: @site-main;
          cursor: pointer;
          user-select: none;
          font-weight: 700;
          margin: 0 3px;
          &:hover {
            color: rgba(0, 98, 211, 0.664);
          }
          &:active {
            color: rgb(0, 86, 185);
          }
        }
      }
    }
  }
}